<template>
  <div class="page-content">
    <div class="page-header">
      <h1 class="page-title">管理员控制台</h1>
      <p class="page-description">系统管理和配置</p>
    </div>

    <div class="grid grid-cols-3 gap-6 mb-6">
      <div class="stat-card">
        <div class="stat-value">{{ stats.totalUsers }}</div>
        <div class="stat-label">总用户数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.totalApps }}</div>
        <div class="stat-label">总应用数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.totalNodes }}</div>
        <div class="stat-label">集群节点</div>
      </div>
    </div>

    <div class="grid grid-cols-2 gap-6">
      <!-- 用户管理 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">用户管理</h3>
          <p class="card-description">管理系统用户和权限</p>
        </div>
        <div class="card-content">
          <div class="space-y-3">
            <div v-for="user in users" :key="user.id" 
                 class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div>
                <div class="font-medium">{{ user.username }}</div>
                <div class="text-sm text-gray-500">{{ user.email }}</div>
              </div>
              <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
                {{ user.role }}
              </span>
            </div>
          </div>
          <div class="mt-4">
            <button class="btn btn-primary btn-sm">添加用户</button>
          </div>
        </div>
      </div>

      <!-- 节点管理 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">节点管理</h3>
          <p class="card-description">管理集群节点状态</p>
        </div>
        <div class="card-content">
          <div class="space-y-3">
            <div v-for="node in nodes" :key="node.id"
                 class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div>
                <div class="font-medium">{{ node.name }}</div>
                <div class="text-sm text-gray-500">{{ node.ip }}</div>
              </div>
              <span class="px-2 py-1 text-xs rounded-full"
                    :class="node.status === 'ready' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                {{ node.status === 'ready' ? '就绪' : '异常' }}
              </span>
            </div>
          </div>
          <div class="mt-4">
            <button class="btn btn-primary btn-sm">添加节点</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const stats = ref({
  totalUsers: 15,
  totalApps: 42,
  totalNodes: 3
})

const users = ref([
  { id: 1, username: 'admin', email: 'admin@example.com', role: '管理员' },
  { id: 2, username: 'developer1', email: 'dev1@example.com', role: '开发者' },
  { id: 3, username: 'developer2', email: 'dev2@example.com', role: '开发者' }
])

const nodes = ref([
  { id: 1, name: 'master-node', ip: '192.168.1.10', status: 'ready' },
  { id: 2, name: 'worker-node-1', ip: '192.168.1.11', status: 'ready' },
  { id: 3, name: 'worker-node-2', ip: '192.168.1.12', status: 'ready' }
])
</script>
